<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="application/javascript" src="/static/js/common.js"></script>
    <title>退货</title>
    <style>
        .form_btn{
            float: left;
            display: block;
            line-height: 38px;
            margin-right: 10px;
        }
    </style>
</head>
<body class="app-body">
<div class="app-panel">
    <div class="app-form">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">退货产品</label>
                <div class="layui-input-block">
                    <input type="text" name="productName" id="_productName" disabled class="layui-input layui-disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">退货时间</label>
                <div class="layui-input-block">
                    <input type="text" name="returnTime" class="layui-input" id="_returnTime">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">退货数量</label>
                <div class="layui-input-inline">
                    <input type="number" name="number" min="0" step="1" class="layui-input">
                </div>
                <div class="form_btn">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" title="自动计算" style="display: none" id="_calculate" lay-click="calculate">
                        <i class="layui-icon">&#xe9aa;</i>
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">返款单价</label>
                    <div class="layui-input-inline">
                        <input type="number" id="_returnPrice" disabled class="layui-input layui-disabled">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">含税进价</label>
                    <div class="layui-input-inline">
                        <input type="number" id="_costPrice" disabled class="layui-input layui-disabled">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">返款退还金额</label>
                    <div class="layui-input-inline">
                        <input type="number" name="refundPrice" min="0.00" step="0.01" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">返款单价X退货数量</div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">应退款总金额</label>
                    <div class="layui-input-inline">
                        <input type="number" name="returnPrice" min="0.00" step="0.01" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">含税进价X退货数量</div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">实际退还总金额</label>
                    <div class="layui-input-inline">
                        <input type="number" name="returnTotalPrice" id="_returnTotalPrice" min="0.00" step="0.01" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="application/javascript" th:inline="none">
    layui.use(['laydate', 'utils', 'axiosUtil'], function () {
        var $ = layui.$,
            laydate = layui.laydate,
            utils = layui.utils,
            axiosUtil = layui.axiosUtil,
            layer = parent.layer;

        var productUuid = utils.requestParam("pid");

        //退货时间
        laydate.render({
            elem: '#_returnTime'
            ,value: utils.nowTime()
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH:mm'
        });

        let _returnPrice = 0.0, _costPrice = 0.0;
        //获取商品信息
        axiosUtil.axios_get("/product/info", {uuid: productUuid}, function (data) {
            _returnPrice = data.returnPrice;
            _costPrice = data.costPrice;
            $("#_productName").val(data.productName);
            $("#_returnPrice").val(_returnPrice);
            $("#_costPrice").val(_costPrice);

            $("#_calculate").show();
        });

        //监听
        utils.event('lay-click', {
            calculate: function () {
                let number = parseFloat($("input[name='number']").val());
                if(!number || typeof number !== "number"){
                    layer.msg("自动计算失败，请确认商品数量！")
                }

                //返款退还金额
                $("input[name='refundPrice']").val((_returnPrice * number).toFixed(2));
                //应退款总金额
                $("input[name='returnPrice']").val((_costPrice * number).toFixed(2));

            }
        });

    })

</script>
</body>
</html>
